<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState" :label-col="{ style: { width: '70px' } }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item name="radio">
              <a-radio-group v-model:value="formState.radioItem">
                <a-radio :value="1">HIS检验项目</a-radio>
                <a-radio :value="2">体检检验项目</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="pyjm">
              <a-input v-model:value="formState.pyjm" placeholder="请输入项目编号/名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item name="yqlx" label="仪器类型">
              <a-select v-model:value="formState.yblx">
                <a-select-option value="">选择全部</a-select-option>
                <a-select-option value="UTF-8">UTF-8</a-select-option>
                <a-select-option value="ASCLL">ASCLL</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <BaseTable :loading="loading" column-code="00001040" :data-source="tableData" :expand-column-width="30" bordered fill>
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'xh'">
            <div>{{ index + 1 }}</div>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="primary" ghost size="small" @click="handelrAdd"> 关联仪器项目 </a-button>
          </template>
        </template>
        <template #expandedRowRender>
          <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
            <template #bodyCell="{ column, index }">
              <template v-if="column.dataIndex === 'xh'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'action'">
                <ConfirmModal description="确定删除?" @confirm="onConfirm">
                  <a-button danger ghost size="small"> 删除 </a-button>
                </ConfirmModal>
              </template>
            </template>
          </a-table>
        </template>
      </BaseTable>
    </a-card>
    <UniteProject
      ref="refDlg"
      v-model:open="projectOpen"
      :columns-left="columnsLeft"
      :columns-right="columnsLeft"
      :open="projectOpen"
      title="仪器项目关联设置"
      :form-dlg="formDlg"
    >
      <a-form :model="formDlg">
        <div class="flex mb-1 items-center">
          <a-form-item class="flex w-1/2">
            <a-input v-model:value="formDlg.pyjm" class="mr-2 w-60" placeholder="项目代号/名称" />
            <a-button type="primary" @click="handlerDetailLeft"> 检索 </a-button>
          </a-form-item>
          <div class="flex flex-col">
            <a-form-item label="仪器类型" class="w-1/2 ml-8">
              <a-input v-model:value="formDlg.yqlx" class="w-60" placeholder="全自动生化分析仪" @change="handlerDetailRight" />
            </a-form-item>
            <a-form-item label="项目名称" class="w-1/2 ml-8">
              <a-input v-model:value="formDlg.xmmc" class="w-60" placeholder="血脂四项" @change="handlerDetailRight" />
            </a-form-item>
          </div>
        </div>
      </a-form>
    </UniteProject>
  </div>
</template>

<script setup>
// import { post } from '@/utils/request'
import { ref, onMounted } from 'vue'
import { debounce } from 'lodash-es'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import UniteProject from '../category/components/UniteProject.vue'

// import { message } from 'ant-design-vue'

// import downloadCSV from '@/utils/tools/downloadCSV'
const loading = ref(false)
const refDlg = ref(null)
const projectOpen = ref(false)
const formDlg = ref({})
const tableData = ref([
  {
    jzbh: '0000001',
    yqlx: '类型',
    xmmc: '合金弹头'
  },
  {
    jzbh: '0000002',
    yqlx: '类型',
    xmmc: '合金弹头'
  }
])
const formRef = ref(null)
const formState = ref({
  xzck: '',
  ylfl: '',
  radioItem: 1,
  pyjm: ''
})
const columnsLeft = [
  {
    dataIndex: 'xmdh',
    title: '项目代号'
  },
  {
    dataIndex: 'xmmc',
    title: '项目名称'
  }
]
const innerColumns = [
  {
    title: '序号',
    dataIndex: 'xh',
    key: 'xh'
  },
  {
    title: '仪器项目编号',
    dataIndex: 'xmbh',
    key: 'xmbh'
  },
  {
    title: '仪器项目名称',
    dataIndex: 'xmbh',
    key: 'xmmc'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]
const innerData = [
  {
    xmbh: '0000001',
    xmmc: '当归'
  },
  {
    xmbh: '0000002',
    xmmc: '枸杞'
  }
]
const handlerDetailLeft = () => {
  refDlg.value.query()
}
const handlerDetailRight = debounce(() => {
  // const value = e.target?.value.trim()
  refDlg.value.query()
}, 1000)
const handelrAdd = () => {
  projectOpen.value = true
}
// const onHandleEdit = (row) => {
//   rowData.value = row
//   projectOpen.value = true
// }
const queryList = async () => {
  // loading.value = true
  // // formState.value
  // const { code, data } = await post('/outp/mzdj/getOutpRecordInfoList', {
  //   brGzdw: formState.value.brGzdw,
  //   brId: '',
  //   brSfz: formState.value.brSfz,
  //   eddate: formState.value['dateRange']?.[1],
  //   ghys: formState.value.ghys,
  //   ghzt: formState.value.ghzt,
  //   ksdm: formState.value.ksdm.length ? formState.value.ksdm : [],
  //   pyjm: formState.value.pyjm,
  //   stdate: formState.value['dateRange']?.[0],
  //   zdmc: formState.value.zdmc
  // })
  // if (code !== 0) return
  // tableData.value = data
  // loading.value = false
}
onMounted(() => {
  queryList()
})
// const onExport = () => {
//   const title = `库存查询`
//   const head = columns.map((item) => item.title)
//   const data = tableData.value.map((item) => {
//     return columns.map((col) => {
//       return item[col.dataIndex]
//     })
//   })
//   downloadCSV(title, head, data).then(() => {
//     message.success('导出成功')
//   })
// }
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}
</style>
